<template>
    <div class="">
        <el-container class="form-container" style="">
            <el-card class="box-card" shadow="never">
                <div slot="header" class="clearfix">
                    <span>Demo</span>
                    <el-button type="primary" size="mini" style="float:right;padding: 6px 9px;" @click="handlerEdit">编辑</el-button>
                </div>
                <div >
                   <el-form  :rules="rules"  ref="form"   :model="form" size="small" label-width="120px">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item  label="姓名"  prop="fdName">
                                    {{form.fdName}}
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item  label="密码"  prop="fdPassword">
                                    {{form.fdPassword}}
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="爱好" prop="fdHobby">
                                    <el-checkbox-group  v-model="form.fdHobby" size="mini" disabled>
                                        <el-checkbox   v-for="hobby in hobbys" 
                                            :label="hobby.id" :value="hobby.id" :key="hobby.id">{{hobby.name}}</el-checkbox>
                                    </el-checkbox-group>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item  label="日期" prop="fdCreateTime">
                                    {{form.fdCreateTime | formatDate}}
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="性别" prop="fdSex" >
                                    <el-radio-group v-model="form.fdSex" disabled>
                                        <el-radio label="M" >男</el-radio>
                                        <el-radio label="F" >女</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="是否有效" prop="fdAvailable" >
                                    <el-radio-group v-model="form.fdAvailable" disabled>
                                        <el-radio  :label="true">是</el-radio>
                                        <el-radio  :label="false">否</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="城市" prop="fdCity">
                                    <el-select :disabled="true" v-model="form.fdCity" size="mini" placeholder="请选择">
                                        <el-option 
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.name"
                                        :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item  label="备注">
                                    {{form.fdRemark}}
                                </el-form-item>
                            </el-col>
                        </el-row>
                   </el-form>
                </div>
            </el-card>
        </el-container>
    </div>
</template>
<script>
import {view} from '@/components/mixins/form';
export default {
    name: "codeExamplePersonView",
    data() {
        return {
            editUrl:'/code/example/edit',
            fetchUrl:'/api/code/example/code_example_person',
            form: {
                fdId:'',
                fdName: '',
                fdCreateTime:'',
                fdPassword:'',
                fdHobby:[],
                fdSex:'',
                fdCity: '',
                fdAvailable:'true',
                attchmentId: '',
                fdRemark: ''
            },
            hobbys:[{id:"1",name:"篮球"},{id:"2",name:"足球"},{id:"3",name:"乒乓球"}],
            options:[
                {
                    value:'yangzhou',
                    name:'扬州'
                },
                {
                    value:'suzhou',
                    name:'苏州'
                }
            ],
            rules:{
                fdName :[{required: true, message: '请输入姓名', trigger: 'blur'}],
                fdCreateTime :[{required: true, message: '请输入时间', trigger: 'blur'}],
                fdPassword :[{required: true, message: '请输入密码', trigger: 'blur'}]
	        }

        }
    },
    mixins:[view]
}
</script>
<style scoped >
@import "~@/assets/css/form_view.css";
</style>

